<template>
  <div class="main">
    <div class="zuo">
      <div class="pie">
        <ik-pie-base-chart
          code="1"
          :title="title1"
          :data="data1"
          :height="height"
        />
      </div>
      <div class="line">
        <ik-line-base-chart
          code="2"
          :title="title2"
          :data="data2"
          :height="height"
        />
      </div>
    </div>
    <div class="zhong">
      <div class="ditu">
        <map-two :title="titletu" :data="datatu" :init-zoom="initZoom" />
      </div>
      <div class="tu">
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="(item, index) in images" :key="index">
            <img :src="item.img">
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="you">
      <div class="pie">
        <ik-pie-base-chart
          code="3"
          :title="title3"
          :data="data3"
          :height="height"
        />
      </div>
      <div class="table">
        <newbiao
          class="teshudebiao"
          :title="titlebiao"
          :table-data="tableData"
          :list="list"
        />
      </div>
    </div>
  </div>
</template>

<script>
import MapTwo from "@/views/board/components/map2.vue"
import IkPieBaseChart from "@/components/ik/echarts/chart/pie/base/IkPieBaseChart/index.vue"
import IkLineBaseChart from "@/components/ik/echarts/chart/line/base/IkLineBaseChart/index.vue"
import newbiao from "@/views/board/components/newbiao.vue"
export default {
  components: {
    MapTwo,
    IkPieBaseChart,
    IkLineBaseChart,
    newbiao
  },
  data() {
    return {
      // 左
      height: "200px",
      title1: "设备类型",
      data1: [
        { type: "类型1", dep: "部门1", value: "30" },
        { type: "类型2", dep: "部门2", value: "30" },
        { type: "类型3", dep: "部门1", value: "30" },
        { type: "类型4", dep: "部门2", value: "30" }
      ],

      title2: "工单类型",
      data2: [
        { type: "类型1", dep: "部门1", value: "10" },
        { type: "类型2", dep: "部门2", value: "30" },
        { type: "类型3", dep: "部门1", value: "20" },
        { type: "类型4", dep: "部门2", value: "40" }
      ],
      // 中
      titletu: "工单总览",
      initZoom: 4.5,
      datatu: [
        {
          code: "code",
          title: "广州",
          x: "113.330245",
          y: "23.116879",
          attr: "",
          num: "10"
        }
      ],
      zhanshiheight: "150px",
      images: [
        {
          img: require("@/views/board/img/1.jpg")
        },
        {
          title: "",
          img: require("@/views/board/img/2.jpg")
        },
        {
          title: "",
          img: require("@/views/board/img/3.jpg")
        }
      ],

      // 右
      title3: "工单时序",
      data3: [
        { type: "类型1", dep: "部门1", value: "20" },
        { type: "类型2", dep: "部门2", value: "30" },
        { type: "类型3", dep: "部门1", value: "10" },
        { type: "类型4", dep: "部门2", value: "50" }
      ],
      titlebiao: "设备清单",
      tableData: [
        {
          date: "123"
        },
        {
          date: "123"
        },
        {
          date: "123"
        }

      ],
      list: [
        {
          prop: "date",
          label: "序号",
          width: "100px"
        },
        { prop: "date", label: "管社区数量" }

        // {
        //   prop: "date",
        //   label: "123123"
        // },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.main {
  width: 100%;
  height: 100%;
  @import "@/styles/robot/robot.scss";
  // overflow-y: scroll;
  .zuo {
    top: 50px;
    left: 1%;
    position: absolute;
    height: calc(100% - 50px);
    width: 24%;
    z-index: 999;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    .pie {
      color: #fff;
      height: 45%;
      margin: 1.25% 0;
    }
    .line{
      height: 45%;
    }
  }
  .zhong {
    top: 0px;
    width: 100%;
    height: 100%;
    .ditu {
      width: 100%;
      height: 100%;
    }
    .tu {
      img {
        margin: 0px;
        width: 100%;
        height: 100%;
        z-index: 999;
      }
      width: 45%;
      bottom: 0;
      left: 27.5%;
      position: absolute;
    }
  }

  .you {
    top: 50px;
    right: 2%;
    position: absolute;
    // background-color: red;
    height: calc(100% - 50px);
    width: 24%;
    z-index: 999;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    .pie{
      height: 45%;
    }
    .table {
      height: 45%;
      .teshudebiao {
        width: 90%;
        height: 100%
      }
    }
  }
}
</style>

<style lang="scss" scoped>

.teshudebiao {
  .el-table::before {
    background-color: transparent;
  }
  ::v-deep .el-table__header tr,
  ::v-deep .el-table th,
  .el-table tr {
    background-color: transparent;
  }
  .el-table,
  .el-table__expanded-cell {
    background-color: transparent;
    border: 0px;
    color: rgb(255, 255, 255);
  }
  .el-table th,
  .el-table tr {
    background-color: transparent;
  }
  .el-table td,
  .el-table th.is-leaf {
    border: 0px;
  }
  .el-table--border::after,
  .el-table--group::after {
    width: 0px;
  }
  .cell {
    color: rgb(255, 255, 255);
  }
  .el-table tbody tr:hover > td {
    background-color: unset !important;
  }
}
</style>
